<template>
  <div class="forget-container">
    <div class="forget_box">
      <div class="forget_box_left">
        <img src="" alt="" />
      </div>
      <div class="forget_box_right">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          tab-position="top"
          style="height: 500px"
        >
          <el-tab-pane label="使用手机号码重置密码" name="first">
            <el-form :model="resetForm" :rules="resetFormRules">
              <el-form-item prop="phone">
                <el-input
                  placeholder="请输入手机号码"
                  v-model="resetForm.phone"
                >
                </el-input>
              </el-form-item>
              <!--手机验证码-->
              <el-form-item
                class="reset-identifyingCode"
                prop="identifyingCode"
              >
                <el-input
                  placeholder="请输入手机验证码"
                  v-model="resetForm.identifyingCode"
                >
                </el-input>
                <button type="button" @click="getloginPhoneCode">
                  |&nbsp;&nbsp;发送验证码
                </button>
              </el-form-item>

              <el-form-item prop="password">
                <!-- 密码 -->
                <el-input
                  placeholder="请输入密码"
                  type="password"
                  v-model="resetForm.password"
                  show-password
                >
                </el-input>
              </el-form-item>
              <!--确认密码-->
              <el-form-item prop="againpassword">
                <el-input
                  show-password
                  placeholder="请再次输入密码"
                  type="password"
                  v-model="resetForm.againpassword"
                >
                </el-input>
              </el-form-item>
              <div class="reset">
                <button class="reset-agree" @click="change_MM">
                  确认重置密码
                </button>
                <a @click="torouter('/login')" style="cursor: pointer"
                  >记得密码？去登陆</a
                >
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane
            label="使用邮箱重置密码"
            name="second"
            :rules="resetFormRules"
          >
            <el-form :model="resetForm" :rules="resetFormRules">
              <el-form-item prop="Email">
                <el-input
                  placeholder="请填写邮箱地址"
                  v-model="resetForm.Email"
                  @blur="sendEmail"
                >
                </el-input>
              </el-form-item>
              <!--邮箱验证码-->
              <el-form-item
                class="reset-identifyingCode"
                prop="identifyingCode"
              >
                <el-input
                  placeholder="请输入邮箱验证码"
                  v-model="resetForm.identifyingCode"
                ></el-input>
                <button type="primary" @click="getloginPhoneCode">
                  |&nbsp;&nbsp;发送验证码
                </button>
              </el-form-item>

              <el-form-item prop="password">
                <!-- 密码 -->
                <el-input
                  placeholder="请输入密码"
                  type="password"
                  v-model="resetForm.password"
                >
                </el-input>
              </el-form-item>
              <!--确认密码-->
              <el-form-item prop="againpassword">
                <el-input
                  placeholder="请再次输入密码"
                  type="password"
                  v-model="resetForm.againpassword"
                >
                </el-input>
              </el-form-item>
              <div class="reset">
                <button class="reset-agree">确认重置密码</button>
                <a @click="torouter('/login')">记得密码？去登陆</a>
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    // 验证输入的手机号验证码是否和存储的验证码相同
    var checkPhoneCode = (rules, value, callback) => {
      if (value == this.loginForm.contenttext) {
        return callback();
      } else {
        callback(new Error("验证码错误"));
      }
    };

    return {
      activeName: "first",
      tabsArr: {
        first: true,
        second: false,
      },
      //表单验证规则对象
      resetFormRules: {
        //检验手机号是否合法
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            transform(value) {
              var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
              if (!phonereg.test(value)) {
                return false;
              } else {
                return Number(value);
              }
            },
          },
        ],

        //检验手机验证码是否合法
        identifyingCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { trigger: "blur" },
        ],

        //检验密码是否合法
        password: [
          { required: true, message: "请重新设定密码", trigger: "blur" },
          {
            min: 6,
            max: 11,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        //检验确认密码是否合法
        againpassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          {
            min: 6,
            max: 11,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        //检验邮箱是否合法
        Email: [
          { required: true, message: "请输入邮箱", trigger: "change" },
          {},
        ],
      },
      resetForm: {
        phone: "",
        identifyingCode: "",
        password: "",
        againpassword: "",
        Email: "",
      },
    };
  },
  methods: {
    handleClick(tab, event) {},
    torouter(address) {
      this.$router.push(address);
    },

    //手机验证码
    async getloginPhoneCode() {
      if (this.resetForm.phone == "") {
        return;
      }
      //获取随机数（4位数）
      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/infoCustomer/mobile",
        params: {
          mobile: self.resetForm.phone,
        },
      });
      console.log(res);
      if (res.code == 200) {
        this.$message.success(res.msg);
      } else {
        this.$message.error("发送失败");
      }
    },
    //邮箱地址
    sendEmail: function () {
      var regEmail =
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (
        this.emailForm.mailAddress != "" &&
        !regEmail.test(this.emailForm.mailAddress)
      ) {
        this.$message({
          message: "邮箱格式不正确",
          type: "error",
        });
        this.emailForm.mailAddress = "";
      }
    },
    async change_MM() {  console.log(this.resetForm);
      if (this.resetForm.password != this.resetForm.againpassword) {
        this.$message.error("两次密码不一致");
      
        return;
      }

      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "post",
        url: "/api/infoCustomer/forget",
        data: {
          account: self.resetForm.phone,
          password: self.resetForm.password,
          code: self.resetForm.identifyingCode,
        },
      });

      console.log(res);
      if (res.code != 200) {
        this.$message.error(res.msg);
        return;
      }

      this.$router.push("/login");
      this.$message.success("修改密码成功,快去登录吧");
    },
  },
};
</script>
<style  lang="less">
.forget-container {
  background-color: rgb(53, 83, 147);
  height: 100%;
  width: 100%;
}
.forget_box {
  width: 1280px;
  height: 580px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}
.forget_box_left {
  height: 100%;
  width: 50%;
  background-color: rgb(101, 147, 190);
  display: flex;

  img {
    height: 300px;
    width: 400px;
    margin: 140px 120px;
    background-color: #fff;
  }
}
.forget_box_right {
  height: 100%;
  width: 50%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .el-tabs {
    height: 200px;
    width: auto;
    margin-top: 50px;
    .el-tabs__nav-wrap {
      width: 300px;
      display: flex;
      justify-content: center;
      margin: auto;
    }
  }

  .el-form {
    width: 60%;
    margin-top: 10px;
    margin: auto;
    display: flex;
    flex-direction: column;
    .el-form-item {
      display: flex;
      flex-direction: column;
      height: 60px;
      span {
        margin: 0px;
      }
    }
  }
}
.reset {
  display: flex;
  flex-direction: column;
  width: 100%;

  a {
    height: 50px;
    width: auto;
    margin: auto;
    line-height: 50px;
    color: rgb(0, 133, 255);
  }

  .reset-agree {
    height: 50px;
    width: 300px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    background-color: rgb(63, 104, 158);
    border-radius: 5px;
    border: none;
    cursor: pointer; //改变光标属性
    margin: auto;
  }
}
.reset-identifyingCode {
  position: relative;

  button {
    position: absolute;
    top: 9px;
    right: 5px;
    background-color: #fff;
    border: none;
    font-size: 16px;
    color: rgb(53, 83, 137);
    cursor: pointer; //改变光标属性
  }
}
</style>